<template>
	<view>
		<u-row justify="flex-start" gutter="10"
			:customStyle="{'background':'#fff','border-radius':'30rpx','margin-top':'20rpx','height':'190rpx','padding':'0 10rpx'}"
			align="flex-start">
			<u-col span="2.3">
				<view style="position:relative;" @click="preview(item.headimg)">
					<view v-if="item.isGood" class="good-view">优</view>
					<image :src="item.headimg" class="tech-image"></image>
					<image v-if="item.isBorder" src="../../static/style/border.gif" class="border-image"></image>
					<image v-if="item.isHot" src="../../static/style/hot.gif" class="hot-image"></image>
					<image v-if="item.isFire" src="../../static/style/fire.gif" class="fire-image"></image>
				</view>
				<view class="status-view">
					可服务
				</view>
			</u-col>
			<u-col span="6">
				<view class="center-col">
					<view style="display: flex;align-items: center;">
						<view class="project-title">{{item.name}}</view>
						<u-icon name="star-fill" :label="item.rate" color="red" labelColor="red" size="16"
							labelSize="12">
						</u-icon>
					</view>
					<view style="display: flex;align-items: center;">

						<view class="order-view">
							已服务：<label style="font-weight: bold;color:#7f7f7f;">174</label>单
						</view>
					</view>
					<view class="info-view">
						<u-icon name="home" :label="item.home||'东郊商家'" labelColor="#999" color="#999" size="18"
							labelSize="12">
						</u-icon>
						<u-icon name="chat" label="89" labelColor="#999" color="#999" size="18" labelSize="12"></u-icon>
						<u-icon name="heart" label="1426" labelColor="#999" color="#999" size="18" labelSize="12">
						</u-icon>
					</view>
				</view>
			</u-col>
			<u-col span="3.6">
				<view class="right-view">
					<view class="status-view timer">
						最早可约11:00
					</view>
				</view>
				<view class="right-view" style="margin-top:10rpx;">
					<u-icon name="map-fill" label="2.7km" color="#24c373" labelSize="12" labelColor="#000"></u-icon>
				</view>
				<view class="right-view" style="margin-top: 10rpx;">
					<view class="button-view" @click="open">
						立即预约
					</view>
				</view>
			</u-col>
		</u-row>

	</view>
</template>

<script>
	export default {
		name: "tachnician-item",
		props: {
			item: {
				default: () => {
					return {}
				}
			},
			index: {
				default: 1
			},
			pid: {
				default: null
			}
		},
		data() {
			return {
				show: false
			};
		},
		methods: {
			open() {
				this.show = true
				console.log('我执行饿了');
				uni.$emit('createPay', {
					open: true,
					item: this.item
				})
			},
			preview(url) {
				uni.previewImage({
					urls: [url]
				})
			}
		}
	}
</script>

<style lang="scss">
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #24c373;
		color: #24c373;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #24c373;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.tech-image {
		width: 115rpx;
		height: 115rpx;
		border-radius: 50%;
		margin-top: 10rpx;
	}

	.border-image {
		width: 125rpx;
		height: 125rpx;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
	}

	.hot-image {
		width: 30rpx;
		height: 50rpx;
		position: absolute;
		right: -20rpx;
		bottom: 8rpx;
	}

	.fire-image {
		width: 40rpx;
		height: 70rpx;
		position: absolute;
		right: -20rpx;
		top: 1rpx;
	}

	.good-view {
		position: absolute;
		left: -9rpx;
		top: 0rpx;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		background: #d4b37f;
		color: #fff;
		text-align: center;
		border-top-left-radius: 18px;
	}




	.project-title {
		font-weight: bold;
		font-size: 30rpx;
		margin-top: 8rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
	}

	.order-view {
		font-size: 24rpx;
		color: #999;
	}

	.status-view {
		background: #24c373;
		color: #fff;
		width: 100%;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		border-radius: 20rpx;
		font-size: 24rpx;
		margin: 5rpx 0rpx;
	}

	.right-view {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}

	.timer {
		border-radius: 6rpx;
		//#ifndef H5
		width: 80%;
		//#endif
		background: #e3fff1;
		color: #24c373;
		font-size: 22rpx;
		font-weight: bold;
	}

	.info-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.center-col {
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 180rpx
	}

	.button-view {
		width: 140rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		background: #24c373;
		color: #fff;
		border-radius: 16rpx;
		font-size: 24rpx;
		margin-top: 16rpx;
	}


	.center-col {
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 180rpx
	}

	.button-view {
		width: 140rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		background: #24c373;
		color: #fff;
		border-radius: 16rpx;
		font-size: 24rpx;
		margin-top: 16rpx;
		/* margin-bottom:15rpx; */
	}


	.project-image {
		width: 170rpx;
		height: 125rpx;
		border-radius: 20rpx;
		margin-top: 13rpx;
		margin-left: 10rpx;
	}

	.project-title {
		font-weight: bold;
		font-size: 30rpx;
		/* margin-top: 8rpx; */
		display: flex;
		align-items: center;
	}

	.project-tips {
		font-size: 24rpx;
		color: #999;
		height: 40rpx;
		line-height: 40rpx;
		margin: 8rpx 0rpx;
	}

	.project-price {
		display: flex;
		align-items: baseline;
		/* margin-top: 10rpx; */
	}

	.rmb-icon {
		font-size: 20rpx;
		color: red;
	}

	.price-true {
		font-size: 32rpx;
		font-weight: bold;
		color: red;
	}

	.price-false {
		font-size: 24rpx;
		color: #d9d9d9;
		text-decoration: line-through;
	}

	.num-view {
		color: #999;
		font-size: 21rpx;
		margin-top: 6rpx;
		margin-bottom: 6rpx;
		/* text-align: center; */
		margin-right: 20rpx;
	}

	.button-view2 {
		width: 140rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		background: #24c373;
		color: #fff;
		border-radius: 16rpx;
		font-size: 24rpx;
		margin-right: 10rpx;
		/* margin-top: 30rpx; */
	}

	.personal {
		/* width:96%; */
		border-radius: 30rpx;
		border: 4rpx solid #24c373;
		display: flex;
		justify-content: flex-start;
		margin-top: 20rpx;
		background: #fff;
		align-items: center;
	}

	.personal-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.personal-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.personal-center {
		font-size: 20rpx;
		color: #999;
	}

	.personal-base {
		width: 96%;
		margin-left: 2%;
		padding: 10rpx 0rpx;
	}

	.personal-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popup-bottom {
		width: 94%;
		position: absolute;
		bottom: 0rpx;
		height: 100rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.popup-center {
		width: 96%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
	}

	.btn-push {
		margin-top: 0px;
		width: 130px;
		height: 40px;
		line-height: 40px;
		font-size: 34rpx;
	}
</style>